ספר הבישול של דפי הסגנון
הקדמה | פאנלים צדדיים | קישורים | טקסט | ניווט | דמויות | נקודות ציון
התאמה אישית של מראה הקישורים בעזרת CSS
אם לא תעשו שום דבר מיוחד לקישור במסמך HTML הוא יראה כך. . המראה מופעל ע"י הדפדפן, לעיתים מוגבל בהעדפות של האדם המשתמש בדפדפן, או ע"י שימוש המחברים במאפייני הקישור באלמנט הגוף. באופן כללי, לטקסט מקושר יהיה את אותו פונט וגודל פונט כמו לטקסט אחר בפיסקה, אך הוא מודגש ובעל צבע שונה. לעיתים קרובות, צבע זה ישתנה אם הדפדפן ביקר בעבר בקישור זה.
ייתכן וזה בסדר מבחינתכם. אך אם מראה הקישור אינו מתאים לשפת העיצוב של הדף שלכם, אתם תהיו מאוד מעוניינים במתכון הזה.
המשיכו לקרוא אם ברצונכם להגדיר צבע טקסט משלכם עבור קישורים תיפטרו מקווי ההדגשה
תנו לקישורים צבע רקע. צרו מראות שונים לסוגים שונים של קישורים, לדוגמא, קישורים לחלקים אחרים של האתר שלכם, בניגוד לקישורים לדפים שמחוץ לאתר שלכם. הגדירו את המראה הרצוי לכם עבור קישורים, תלוי מתי ביקרו בהם; כאשר העכבר נמצא עליהם; או אפילו בזמן שמקליקים עליהם.
1. מראה בסיסי של קישור
הדבר הראשון שתרצו אולי לעשות הוא ליצור מספר בוררים בדף הסגנון שלכם, שיבחרו קישורים במצביהם השונים: בסדר הופעתם, שלא ביקרו בהם, שביקרו בהם, בזמן שהעכבר נמצא עליהם ובזמן שמקליקים עליהם.
A:link
A:visited
A:hover
A:active
ואז הכל מאוד פשוט. אתם פשוט נותנים מספר ערכים למספר מאפיינים עבור מצבי הקישור השונים הללו. הנה מספר רעיונות.
הגדירו את צבע הטקסט.
A:link {color: purple}
פשוט הכניסו את ערך הצבע שלכם במקום "purple (סגול)". אך זכרו, כאשר קיימים ערכים שונים רבים וסוגים של ערכים שביכולתכם להשתמש בהם, אתם לא יכולים לכתוב מה שעולה על רוחכם.
תיפטרו מקווי ההדגשה.
A:link {text-decoration: none}
ככל הנראה תרצו לעשות זאת עבור כל מצבי הקישור האחרים, כפי שגם מתואר קודם לכן.
הגדירו צבע עבור הרקע.
A:link {background-color: lime}
שוב, תצטרכו לעשות זאת עבור מצבי הקישור האחרים, סביר שזה יהיה אותו הצבע, או אולי צבע שונה לכל אחד מהם. בידקו במדריך ה-CSS שלנו את ערכיי הצבע שבהם תוכלו להשתמש.
בסיכומו של דבר
אם תרצו שקישורים שלא ביקרו בהם יופיעו בטקסט סגול, על רקע ירקרק וללא הדגשה, הקוד שבדף הסגנון שלכם אמור להיראות משהו כמו זה.
A:link {color: purple; text-decoration: none; background-color: lime}
והחלק הקל הוא שאינכם צריכים לעשות דבר למסמך ה-HTML שלכם, חוץ מאשר לקשר את דף הסגנון אליו, כמובן עשו זאת והקישורים שלכם ייראו כך.
2. מראה שונה עבור סוגים שונים של קישורים
זה נחמד אם יש ביכולתכם להראות לאנשים מתי הקישור ייקח אותם לחלק אחר של האתר שלכם, ומתי הוא ייקח אותם מן האתר שלכם בכלל. יתכן ותרצו גם ליצור הבחנה בין קישורים שהולכים למקומות שונים, למשל, מדריך ה-CSS, לעומת שיעור מעשי של ה-CSS.
כדי לעשות זאת עליכם לתת מעמדות שונים לקישורים השונים במסמך ה-HTML שלכם, ולהגדיר מאפיינים שונים עבור בוררי המעמד הללו בדף הסגנון שלכם. אך אל דאגה, זה לא קשה כמו שזה נשמע.
ב-HTML שלכם:
נתינת מעמד לקישור היא דבר קל, ומספר עורכי HTML מתקדמים יותר יהפכו את התהליך לאוטומטי כאשר תקשרו את דף הסגנון (ועורך WYSIWIG אחד, מחברה גדולה, שאיננו מזכירים כאן, יעמיד פנים להפוך את התהליך לאוטומטי, אך למעשה עושה זאת בצורה לא נכונה ואתם תחשבו כי בוררי מעמד אינם עובדים. הם כן עובדים! כך שאם השתמשתם בעורך, ודאו כי הקוד שהוא יוצר ייראה כך).
כמו שאתם כמעט בטוח יודעים, קישורים רגילים נראים באופן הבא:
<a href="http://www.emblaze.com">Video</a>
כעת, הבה נגיד שאני רוצה לתת מראה מיוחד לכל הקישורים הנכנסים למדריך ה-CSS. כל שעליי לעשות הוא לתת מעמד לקישורים של המדריך של "handbook" באופן הבא:
<a href="http://www.emblaze.com" class= "handbook">Video</a>
כעת, עברו על כך ועשו זאת לכל הקישורים שלהם אתם רוצים לתת מעמד זה, ואז תהיו מוכנים לחזור חזרה לדף הסגנון שלכם.
בדף הסגנון שלכם:
כל שעליכם לעשות עכשיו הוא ליצור בורר שיבחר קישורים ממעמד "handbook (מדריך)", בהמשך לדוגמא וליישם מספר מאפיינים לבורר זה.
הבורר שיבחר את כל הקישורים ממעמד "handbook" נראה כך
A.handbook
ואם תרצו לעשות את כל הקישורים למדריך בגוון ירוק מיוחד עם רקע בגוון סגול מסויים, לא מודגש, אזי דף הסגנון שלכם ייראה כך
A.handbook {background-color: #510fde;
color: #17c707;
text-decoration: none}
ולאחר ששמרתם את דף הסגנון הזה וקישרתם אותו למסמך ה-HTML שלכם כל אותם קישורים שסימנתם אותם במעמד "handbook" ייראו כך.
כעת, אולי אתם לא אוהבים את שילוב הצבעים הזה, ואולי אחרי שישה חודשים תשנו את כל מראה האתר שלכם. שינוי המראה הוא כל כך פשוט כיוון שכל שעליכם לעשות הוא לשנות מאפיינים אלה בדף הסגנון.
אנו יכולים לשלב את הבוררים עבור המעמדות השונים שראינו למעלה ('ישור, שביקרו בו וכו'…) עם המעמדות. לדוגמא, כדי לבחור קישורים ממעמד המדריך בלבד, שהם במצב ריחוף (hover), אנו משתמשים בבורר הבא
A.handbook:hover
שימו לב, זהו קישור ממעמד מדריך במצב ריחוף, כך שהסדר הוא כמו למעלה, כאשר מוסיפים את hover: ל- A.handbook ולא להיפך.
ייתכן ותרצו ליצור את הקישורים שלכם שיבלטו בצורות שונות מאשר רק צבע וצבע רקע. בדקו את המתכון הזה עבור מאפיינים אחרים שתוכלו להגדיר בעזרת דף הסגנון.
הקדמה | פאנלים צדדיים | קישורים | טקסט | ניווט | דמויות | נקודות ציון
|
